<template>
  <div class="svip_container">
    <div class="svip_wrapper">
      <el-table :data="this.list" style="width: 100%">
        <el-table-column prop="uid" label="id" width="180"> </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="180">
        </el-table-column>
        <el-table-column prop="avatar" label="头像" width="180">
          <template slot-scope="prop">
            <!-- vue实例外创建 -->
            <img
              :src="prop.row.avatar"
              alt=""
              width="40px
          "
            />
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号码" width="180">
        </el-table-column>
        <el-table-column prop="created_at" label="日期" width="180">
          <template slot-scope="prop">
            <!-- vue实例外创建 -->
            <p>{{ prop.row.created_at | timeFilter }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="prop">
            <a href="#" @click="onClickDelete(indx)">删除</a>&nbsp;
            <a href="#" @click="bianji(prop.row)">编辑</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="showList.length"
      @current-change="pageChange"
      :page-size="this.onPage"
    >
    </el-pagination>
    <!-- 编辑框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
           <el-form-item label="手机号" >
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      showList: [],
      onPage: 20,
      onNext: 20,
      form:{
          name:'',
          mobile:"",
          uid:""
      },
      dialogFormVisible:false
    };
  },
  mounted() {
    axios.get("http://localhost:8080/list.json").then((res) => {
      //   console.log(res);
      this.showList = res.data;
      for (var i = 0; i <= this.onPage; i++) {
        this.list.push(this.showList[i]);
      }
      //   console.log(this.list);
    });
  },
  filters: {
    timeFilter(value) {
      var date = new Date(value * 1000);
      var str = `${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒，${date.getFullYear()}年`;
      return str;
    },
    //过滤时间
  },
  methods: {
    pageChange(val) {
      //   console.log(val)
      this.list = [];
      var star = (val - 1) * this.onPage;
      var end = val * this.onPage;
      if (end > this.showList.length) {
        end = this.showList.length;
      }
      for (var i = star; i < end; i++) {
        this.list.push(this.showList[i]);
      }
    },
    onClickDelete(index) {
      this.list.splice(index, 1);

      //删除数据record 是固定的
    },
    bianji(val){
        this.dialogFormVisible=true
        this.form.name=val.nickname
        this.form.mobile=val.mobile
        this.uid=val.uid
    },
    ok(){
        this.dialogFormVisible=false
        this.list.forEach((item)=>{
            if(item.uid==this.uid){
                item.nickname=this.form.name
                item.mobile=this.form.mobile
            }
        })
    }
  },
};
</script>
<style>
.svip_containert {
  width: 100%;
  height: 100vh;
}
.svip_wrapper {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
</style>